<!DOCTYPE html>
<html lang="zh">
</viewport>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>麦积山石窟-首页</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" >
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="public/main.css">
</head>

<body>
  <header>
    <nav id="menu" class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="#">
                麦积山石窟
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                    <a class="nav-link" href="#">首页<span class="sr-only"></span></a>
                    </li>

                     
                       
                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            
                                景区

                        </a>
                           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">石窟</a>
                            <a class="dropdown-item" href="#">植物园</a>
                            <a class="dropdown-item" href="#">仙人崖</a>
                            <a class="dropdown-item" href="#">街亭古镇</a>
                          
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#"></a>
                         </div>
                     </li>
                       <li class="nav-item">
                     <a class="nav-link" href="#">近期活动</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                    </li>

                </ul>
                      <button class="btn btn-outline-danger my-2 my-sm-0 animated infinite pulse">支持我们</button>
                      <form class="d-flex">
                        <button class="btn btn-outline-support animate__animated animate__pulse animate__infinite" type="submit">服务中心</button>
                      </form>
            </div>
    </nav>
</header>
  <main>
    <!-- 焦点图 -->
    <div class="slide container-fluid">
      <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
            aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active"><br><br>
            
            <img src="麦积山2.jpg" class="d-block w-100" alt="麦积山图片5">
          </div>
          <div class="carousel-item"><br><br>
           
            <img src="麦积山1.jpg" class="d-block w-100" alt="麦积山图片1">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
          data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
          data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <!-- 活动信息 -->
    <div class="container" id="pb-act">
      <h3><br>近期活动</h3>
      <div class="row">
        <div class="col-3"><img src="山水.jpg" class="m-block w-100 h-80" alt="活动照片"></div>
        <div class="col-6">
          <h4>莘莘甘肃学子，免费畅游麦积山活动</h4>
          <ul>
            <li>2021年3月21日 10：00 - 2021年3月26日 12：00</li>
            <li>甘肃省天水市麦积区麦积镇麦积村</li>
          </ul>
          <p>让莘莘学子领略中国四大石窟之一、东方雕塑陈列馆——麦积山神奇灵秀的自然风光，感悟麦积山悠久灿烂的历史文化，
            留住家乡醇厚的记忆，麦积山风景名胜区管理委员会、麦积山石窟艺术研究所、甘肃省小陇山林业实验局麦积植物园已经连续开展了四届 “莘莘甘肃学子，
            畅游醉美麦积山”活动。</p>
        </div>
        <div class="col-3"><br><br><br>
          <button type="button" class="btn btn-danger">我要参加</button>
        </div>
      </div>
      <div class="row animated fadeInUp delay-2s mb-5 pb-3">
          <div class="col-md-3">
              <div class="img">
                  <img class="img-fluid" src="植树.jpg" class="m-block w-50 h-80"alt="活动照片">
              </div>
          </div>
          <div class="col-md-6 event-info">
            <ul>
              <li>2021年3月15日 10：00 - 2021年3月16日 12：00</li>
              <li>甘肃省天水市麦积区麦积镇麦积村</li>
            </ul>
              <p>草长莺飞，万物复苏，春天来了。每年的3月12日是我国的植树节，植树造林，绿化祖国，改善环境，造福子孙后代，建设生态林业，是我们不变的承诺。</p>
          </div>
          <div class="col-md-3"><br><br>
              <button type="button" class="btn btn-danger">我要参加</button>
          </div>
    <!-- 会员信息 -->
    <div class="container my-5 position-relative" id="member">
      <h3 class="text-center fs-1 position-relative">历史简介</h3>
      <div class="row">
        <div class="col-4">
          麦积山石窟（Maiji Mountain Grottoes）：世界文化遗产，国家AAAAA旅游景区，国家重点风景名胜区，国家森林公园，国家地质公园，
          全国重点文物保护单位，中国四大石窟之一。
        </div>
        <div class="col-4">麦积山位于甘肃省天水市麦积区，是小陇山中的一座孤峰，高142米，因山形酷似麦垛而得名。
          麦积山石窟始建于384-417年，存有221座洞窟、10632身泥塑石雕、1300余平方米壁画，以其精美的泥塑艺术闻名世界，
          被誉为东方雕塑艺术陈列馆。</div>
        <div class="col-4">麦积山风景区由麦积山、仙人崖、石门、曲溪、街亭温泉五个子景区180多个景点组成，拥有丰富多样的生物类型和物种，
          被称为“陇上林泉之冠”，具有深厚的旅游价值，是丝绸古道黄金旅游线上的一颗耀眼的艺术明珠和最具潜力的旅游胜地。
          麦积山石窟保留有大量的宗教、艺术、建筑等方面的实物资料，体现了千余年来各个时代塑像的特点，
          反映了中国泥塑艺术发展和演变过程，丰富了中国古代文化史，为后世研究我国宗教文化提供了丰富的资料和史实。</div>
      </div>
    </div>
    <!-- 联系信息 -->
    <div class="row">
      <div class="col-lg-4 text-center">
          <h4>扫码关注</h4>
          <img src="http://images.669pic.com/element_pic/60/61/0/12/c249acc7126ab07da8beb60546ba50d4.jpg" class="m-block w-50" alt="加载失败">
      </div>
      <div class="col-lg-4">
          <h4>联系我们</h4>
          <ul class="list-unstyled">
              <li><i class="fa fa-map-marker"></i>麦积村麦积山风景区</li>
              <li><i class="fa fa-phone" aria-hidden="true"></i>(123) 456-78910 - (321) 199-3265</li>
              <li><i class="fa fa-paper-plane" aria-hidden="true"></i>info@example.com</li>
              <li><i class="fa fa-globe" aria-hidden="true"></i>www.example.com</li>
          </ul>
      </div>

      <div class="col-lg-4">
          <h4>主要信息</h4>
          <ul class="list-unstyled list-colums">
              <li>中文名：麦积山石窟</li>
              <li>外文名：Maiji Mountain Grottoes</li>
              <li></i>地理位置：甘肃省天水市麦积区[2] </li>
              <li>开放时间：5月1日-10月31日 08:30-17:30；11月1日-次年4月30日 09:00-17:00</li>
              <li>别名：东方雕塑馆</li>
              <li>景点级别：AAAAA级</li>
              <li>门票价格：70元，60岁老人及学生半价</li>
          </ul>
      </div>
  </div>
  </main>
  <footer class="container-fluid bg-white">
    <p class="text-center">© Copyright 2020 - <a href="#">麦积山石窟</a> - All Rights Reserved</p>
  </footer>
  <div id="va-demo" class="container-fluid d-table">
  <!-- <div id="va-demo" class="container-fluid d-table">
    <p class="text-center d-table-cell align-middle">© Copyright 2020 - 白银市义工联合会 - All Rights Reserved</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  </div> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"></script>
</body>

</html>
